class CreateGlasObh {
    constructor(element, imgArr) {
        //定义属性 存储形参
        this.ele = element;
        this.arr = imgArr;

        //定义属性 存储全局变量
        this.show;
        this.glass;
        this.list;
        this.img;
        this.mask;
        this.imgArr;

        //存储标签占位属性
        this.marginLeft;
        this.marginTop;
        this.borderLeft;
        this.borderTop;
        this.showHeight;
        this.showWidth;
        this.marginLeft;
        this.marginTop;
    }

    //定义入口函数
    init() {
        this.setPage();
        this.mouseShow();
        this.mouseList();
        this.mouseMove();
    }
    //动态生成页面
    setPage() {
        //创建标签节点
        this.show = document.createElement('div');
        this.glass = document.createElement('div');
        this.list = document.createElement('ul');
        this.img = document.createElement('img');
        this.mask = document.createElement('div');

        //设定标签节点类名
        this.show.classList.add('show');
        this.list.classList.add('list');
        this.mask.classList.add('mask');
        this.glass.classList.add('glass');

        this.img.setAttribute('src', `../images/${this.arr[0].large}`);

        this.glass.style.backgroundImage = `url('../images/${this.arr[0].large}')`;

        let liStr = '';

        this.arr.forEach(function (item, key) {
            liStr += key === 0 ? `<li><img class="active" index="${key}" src="../images/${item.small}"></li>` : `<li><img index="${key}" src="../images/${item.small}"></li>`
        })
        this.list.innerHTML = liStr;


        this.show.appendChild(this.img);  //显示图片
        this.show.appendChild(this.mask); //黄色拖块

        this.ele.appendChild(this.show);  //开始显示的图片
        this.ele.appendChild(this.glass); //放大图层
        this.ele.appendChild(this.list);  //小图片展示区域

        this.imgArr = this.list.querySelectorAll('img');

        //外边距
        this.marginLeft = this.ele.offsetLeft;
        this.marginTop = this.ele.offsetTop;
        //边框线
        this.borderLeft = this.show.clientLeft;
        this.borderTop = this.show.clientTop;
        //show占位
        this.showWidth = this.show.clientWidth;
        this.showHeight = this.show.clientHeight;

        // mask默认是 none 隐藏 直接获取占位结果是 0
        // 只能通过 css样式获取占位数值 内容+padding+border
        this.maskWidth = parseInt(window.getComputedStyle(this.mask).width);
        this.maskHeight = parseInt(window.getComputedStyle(this.mask).height);

    }

    mouseShow() {
        this.show.addEventListener('mouseenter', () => {
            this.mask.style.display = 'block';
            this.glass.style.display = 'block';
        })

        this.show.addEventListener('mouseleave', () => {
            this.mask.style.display = 'none';
            this.glass.style.display = 'none';
        })
    }

    mouseList() {
        this.list.addEventListener('mouseover', e => {
            console.log(111);
            if (e.target.tagName === 'IMG') {
                console.log(222);
                this.imgArr.forEach(item => {
                    item.classList.remove('active');
                })

                e.target.classList.add('active');

                this.img.setAttribute('src', `../images/${this.arr[Number(e.target.getAttribute('index'))].large}`);

                this.glass.style.backgroundImage = `url("../images/${this.arr[Number(e.target.getAttribute('index'))].large}")`
            }
        })
    }

    mouseMove() {
        this.show.addEventListener('mousemove', e => {
            let x = e.pageX - this.marginLeft - this.borderLeft - this.maskWidth / 2;
            let y = e.pageY - this.marginTop - this.borderTop - this.maskHeight / 2;

            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;

            x = x > this.showWidth - this.maskWidth ? this.showWidth - this.maskWidth : x;
            y = y > this.showHeight - this.maskHeight ? this.showWidth - this.maskWidth : y;

            this.mask.style.left = x + 'px';
            this.mask.style.top = y + 'px';

            this.glass.style.backgroundPosition = `${-x * 4}px ${-y * 4}px`;
        })
    }
}